<template>
	<div class="table-demo-container layout-padding">
		<div class="table-demo-padding layout-padding-view layout-padding-auto">
			<!-- 搜索区域 -->
			<div class="content-wrapper">
				<vxe-form v-bind="formOptions" v-on="formEvents"></vxe-form>
				<div style="margin-bottom: 10px;">
					<el-button type="primary" size="default" @click="handleSendMessage">发送短信</el-button>
					<el-button type="primary" size="default" @click="handleTemplate">短信模板</el-button>
					<el-button type="primary" size="default" @click="handleGroup">客户分组</el-button>
					<el-button type="primary" size="default" @click="handleAutoSend">自动发送配置</el-button>
					<el-button type="info" size="default" @click="handleBalance">短信余额</el-button>
				</div>
				<!-- 表格区域 -->
				<div class="table-wrapper">
					<vxe-table ref="tableRef" empty-text="没有更多数据了！" :loading="loading" round stripe border show-overflow
						:data="tableData" :height="'100%'">
						<vxe-column type="seq" width="60"></vxe-column>
						<vxe-column field="sendTime" title="发送时间" width="180"></vxe-column>
						<vxe-column field="phoneNumber" title="接收手机号" width="120"></vxe-column>
						<vxe-column field="content" title="短信内容" show-overflow></vxe-column>
						<vxe-column field="status" title="发送状态" width="100">
							<template #default="{ row }">
								<el-tag :type="row.status === 'success' ? 'success' : 'danger'">
									{{ row.status === 'success' ? '发送成功' : '发送失败' }}
								</el-tag>
							</template>
						</vxe-column>
					</vxe-table>
				</div>
			</div>
			<!-- 分页区域 -->
			<div class="pagination-wrapper">
				<vxe-pager v-model:currentPage="pageVO.currentPage" v-model:pageSize="pageVO.pageSize"
					:total="pageVO.total" @page-change="pageChange">
				</vxe-pager>
			</div>
		</div>

		<!-- 发送短信弹窗 -->
		<el-dialog title="发送短信" v-model="sendDialogVisible" width="50%" :close-on-click-modal="false">
			<el-form :model="sendForm" label-width="100px">
				<el-form-item label="发送方式">
					<el-radio-group v-model="sendForm.sendType">
						<el-radio :label="1">单发</el-radio>
						<el-radio :label="2">群发</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="接收对象" v-if="sendForm.sendType === 1">
					<el-input v-model="sendForm.phoneNumber" placeholder="请输入手机号码"></el-input>
				</el-form-item>
				<el-form-item label="客户分组" v-if="sendForm.sendType === 2">
					<el-select v-model="sendForm.groupId" placeholder="请选择客户分组">
						<el-option v-for="group in groupList" :key="group.id" :label="group.name"
							:value="group.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="短信模板">
					<el-select v-model="sendForm.templateId" placeholder="请选择短信模板" @change="handleTemplateChange">
						<el-option v-for="template in templateList" :key="template.id" :label="template.name"
							:value="template.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="短信内容">
					<el-input v-model="sendForm.content" type="textarea" :rows="4" placeholder="请输入短信内容"></el-input>
					<div class="message-tip">已输入 {{ sendForm.content.length }} 字，短信计费 {{
					Math.ceil(sendForm.content.length / 70)
				}} 条</div>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="sendDialogVisible = false">取消</el-button>
					<el-button type="primary" :loading="submitLoading" @click="handleSendSubmit">发送</el-button>
				</span>
			</template>
		</el-dialog>

		<!-- 短信模板弹窗 -->
		<el-dialog title="短信模板管理" v-model="templateDialogVisible" width="50%" :close-on-click-modal="false">
			<div class="template-header">
				<el-button type="primary" size="small" @click="handleAddTemplate">新增模板</el-button>
			</div>
			<el-table :data="templateList" border style="width: 100%">
				<el-table-column prop="name" label="模板名称" width="180"></el-table-column>
				<el-table-column prop="content" label="模板内容" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" width="150" align="center">
					<template #default="{ row }">
						<el-button type="primary" size="small" @click="handleEditTemplate(row)">编辑</el-button>
						<el-button type="danger" size="small" @click="handleDeleteTemplate(row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>

		<!-- 客户分组弹窗 -->
		<el-dialog title="客户分组管理" v-model="groupDialogVisible" width="50%" :close-on-click-modal="false">
			<div class="group-header">
				<el-button type="primary" size="small" @click="handleAddGroup">新增分组</el-button>
			</div>
			<el-table :data="groupList" border style="width: 100%">
				<el-table-column prop="name" label="分组名称" width="180"></el-table-column>
				<el-table-column prop="count" label="客户数量" width="100"></el-table-column>
				<el-table-column prop="description" label="分组描述" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" width="200" align="center">
					<template #default="{ row }">
						<el-button type="primary" size="small" @click="handleEditGroup(row)">编辑</el-button>
						<el-button type="success" size="small" @click="handleManageCustomer(row)">管理客户</el-button>
						<el-button type="danger" size="small" @click="handleDeleteGroup(row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>

		<!-- 自动发送配置弹窗 -->
		<el-dialog title="自动发送配置" v-model="autoSendDialogVisible" width="70%" :close-on-click-modal="false">
			<auto-send-config />
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="messageService">
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import AutoSendConfig from './autoSendConfig.vue';

// 分页数据
const pageVO = reactive({
	total: 0,
	currentPage: 1,
	pageSize: 10
});

const loading = ref(false);
const submitLoading = ref(false);

// 搜索表单配置
const formOptions = reactive({
	data: {
		phoneNumber: '',
		status: '',
		dateRange: []
	},
	items: [
		{ field: 'phoneNumber', title: '手机号码', span: 6, itemRender: { name: 'VxeInput' } },
		{
			field: 'status',
			title: '发送状态',
			span: 6,
			itemRender: {
				name: 'VxeSelect',
				options: [
					{ value: 'success', label: '发送成功' },
					{ value: 'fail', label: '发送失败' }
				]
			}
		},
		{
			field: 'dateRange',
			title: '发送时间',
			span: 6,
			itemRender: {
				name: 'VxeInput',
				props: { type: 'daterange' }
			}
		},
		{
			span: 6,
			collapseNode: false,
			align: 'center',
			itemRender: {
				name: 'VxeButtonGroup',
				options: [
					{ type: 'submit', content: '搜索', status: 'primary' },
					{ type: 'reset', content: '重置' },
				],
			},
		},
	],
});

// 表单事件
const formEvents = {
	submit(e) {
		pageVO.currentPage = 1;
		getMessageList(e.data);
	},
	reset() {
		pageVO.currentPage = 1;
		getMessageList();
	},
};

// 表格数据
const tableData = ref([]);

// 获取短信记录列表
const getMessageList = (params = {}) => {
	loading.value = true;
	// 这里调用获取短信记录的API
	setTimeout(() => {
		// 模拟数据
		tableData.value = [
			{
				sendTime: '2024-01-20 10:00:00',
				phoneNumber: '13800138000',
				content: '尊敬的客户，您的预约已确认...',
				status: 'success'
			}
		];
		pageVO.total = 100;
		loading.value = false;
	}, 500);
};

// 初始化列表
getMessageList();

// 分页变化
const pageChange = ({ pageSize, currentPage }) => {
	pageVO.currentPage = currentPage;
	pageVO.pageSize = pageSize;
	getMessageList();
};

// 发送短信相关
const sendDialogVisible = ref(false);
const sendForm = reactive({
	sendType: 1,
	phoneNumber: '',
	groupId: '',
	templateId: '',
	content: ''
});

// 打开发送短信弹窗
const handleSendMessage = () => {
	sendForm.sendType = 1;
	sendForm.phoneNumber = '';
	sendForm.groupId = '';
	sendForm.templateId = '';
	sendForm.content = '';
	sendDialogVisible.value = true;
};

// 发送短信
const handleSendSubmit = () => {
	if (sendForm.sendType === 1 && !sendForm.phoneNumber) {
		ElMessage.warning('请输入手机号码');
		return;
	}
	if (sendForm.sendType === 2 && !sendForm.groupId) {
		ElMessage.warning('请选择客户分组');
		return;
	}
	if (!sendForm.content) {
		ElMessage.warning('请输入短信内容');
		return;
	}

	submitLoading.value = true;
	// 这里调用发送短信的API
	setTimeout(() => {
		ElMessage.success('发送成功');
		sendDialogVisible.value = false;
		submitLoading.value = false;
		getMessageList();
	}, 1000);
};

// 短信模板相关
const templateDialogVisible = ref(false);
const templateList = ref([]);

// 打开短信模板弹窗
const handleTemplate = () => {
	getTemplateList();
	templateDialogVisible.value = true;
};

// 获取模板列表
const getTemplateList = () => {
	// 这里调用获取模板列表的API
	setTimeout(() => {
		templateList.value = [
			{
				id: 1,
				name: '预约提醒',
				content: '尊敬的客户，您的预约已确认...'
			}
		];
	}, 500);
};

// 选择模板时自动填充内容
const handleTemplateChange = (templateId) => {
	const template = templateList.value.find(t => t.id === templateId);
	if (template) {
		sendForm.content = template.content;
	}
};

// 客户分组相关
const groupDialogVisible = ref(false);
const groupList = ref([]);

// 打开客户分组弹窗
const handleGroup = () => {
	getGroupList();
	groupDialogVisible.value = true;
};

// 获取分组列表
const getGroupList = () => {
	// 这里调用获取分组列表的API
	setTimeout(() => {
		groupList.value = [
			{
				id: 1,
				name: 'VIP客户',
				count: 100,
				description: 'VIP客户分组'
			}
		];
	}, 500);
};

// 查询短信余额
const handleBalance = () => {
	// 这里调用查询短信余额的API
	setTimeout(() => {
		ElMessage.success('当前短信余额：1000条');
	}, 500);
};

// 自动发送配置相关
const autoSendDialogVisible = ref(false);

// 打开自动发送配置弹窗
const handleAutoSend = () => {
	autoSendDialogVisible.value = true;
};
</script>

<style scoped lang="scss">
.table-demo-container {
	height: 100%;

	.table-demo-padding {
		height: 100%;
		padding: 15px;
		display: flex;
		flex-direction: column;

		.content-wrapper {
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			margin-bottom: 15px;

			.table-wrapper {
				flex: 1;
				overflow: hidden;
			}
		}

		.pagination-wrapper {
			height: 40px;
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}
	}

	.message-tip {
		color: #666;
		font-size: 12px;
		margin-top: 5px;
	}

	.template-header,
	.group-header {
		margin-bottom: 15px;
	}
}
</style>
